{extend name="public/world"}
{block name="style"}
<style>
    .role-list-form dl {
        display: block;
    }
    .role-list-form-top {
        border: 1px solid #f9f9f9;
    }
    .role-list-form dl dt {
        display: block;
        background-color: #f9f9f9;
        padding: 0 0 5px 10px;
    }
    .role-list-form dl dd {
        display: block;
        padding: 0 25px;
        overflow: hidden;
    }
    .role-list-form dl dd dl dt {
        background: 0;
    }
    .role-list-form dl dd dl dd dl dd {
        padding: 0 0 5px 45px;
    }
</style>
{/block}
{block name="container"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="{:url('/setting.SystemRole/role')}" method="post">
                <div class="layui-form-item role-list-form">
                    {volist name="menu_list" id="v"}
                    <dl class="role-list-form-top">
                        <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{$v['id']}" data-pid="0" data-level="1" lay-skin="primary" title="{$v['menu_name']}"></dt>
                        <dd>
                            {volist name="v['child']" id="vv"}
                            <dl>
                                <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{$vv['id']}" data-pid="{$vv['pid']}" data-level="2" lay-skin="primary" title="{$vv['menu_name']}"></dt>
                                <dd>
                                    {volist name="vv['child']" id="vvv"}
                                    <dl>
                                        <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{$vvv['id']}" data-pid="{$vvv['pid']}" data-level="3" lay-skin="primary" title="{$vvv['menu_name']}"></dt>
                                        <dd>
                                            {volist name="vvv['child']" id="vvvv"}
                                            <input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{$vvvv['id']}" data-pid="{$vvvv['pid']}" data-level="4" lay-skin="primary" title="{$vvvv['menu_name']}">
                                            {/volist}
                                        </dd>
                                    </dl>
                                    {/volist}
                                </dd>
                            </dl>
                            {/volist}
                        </dd>
                    </dl>
                    {/volist}
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="{$group.id}">
                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit">提交</button>
                        <a href="{:url('/setting.SystemRole/index')}" class="layui-btn layui-btn-primary ml10"><i class="aicon ai-fanhui"></i>返回</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var formData = {:json_encode($group)};
    layui.use(['form'], function() {
        var $ = layui.jquery,
            form = layui.form;

        form.on('checkbox(roleAuth)', function(data) {
            var child = $(data.elem).parent('dt').siblings('dd').find('input');
            /* 自动选中父节点 */
            var check_parent = function (id) {
                var self = $('.role-list-form input[value="'+id+'"]');
                var pid = self.attr('data-pid') || '';
                var checked = false;
                $(self).parent('dt').siblings('dd').find('input').each(function(index, item) {
                    if(item.checked) {
                        checked = true;
                    }
                });
                self.prop('checked', checked);

                if (pid == '') {
                    return false;
                }
                check_parent(pid);
            };
            /* 自动选中子节点 */
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            check_parent($(data.elem).attr('data-pid'));
            form.render('checkbox');
        });

        /* 权限赋值 */
        if (formData) {
            for(var i in formData['roles']) {
                $('.role-list-form input[value="'+formData['roles'][i]+'"]').prop('checked', true);
            }
            form.render('checkbox');
        }
    });
</script>
{/block}